<template>
  <el-dialog :visible="isPop" title="导入工资数据" width="700px" @close="onClose">
    <el-tabs v-model="active">
      <el-tab-pane label="全覆盖式导入"></el-tab-pane>
      <el-tab-pane label="分列式导入" lazy> </el-tab-pane>
    </el-tabs>
    <div class="row">
      <span v-if="active == 1" style="width:150px; margin-right: 10px;" @click="isOptionPop = true">请选择导入的工资项</span>
      <el-upload :action="action" :auto-upload="false" :accept="accept" :on-change="onChange" class="upload" :file-list="fileList" ref="upload" :http-request="uploadSectionFile">
        <el-input placeholder="请选择导入的文件!" disabled></el-input>
        <el-button size="small">浏览文档</el-button>
      </el-upload>
      <el-link type="primary" @click="onClickDown">下载工资数据导入模板</el-link>
    </div>
    <div class="hint">
      <p>1. 请使用标准模板进行导入，完善工资数据即可，方便不易出错</p>
      <p>2. 请注意文件导入要求</p>
      <p>1）不支持复合表头</p>
      <p>2）只能导入系统中已有员工的工资数据</p>
      <p>3）工资项目需要和工资表中设置的保持一致，不能删除与更改工资项，否则不能识别</p>
      <p>4）重名员工，请填写工号，否则不能识别</p>
    </div>
    <import-options-pop :is-pop.sync="isOptionPop" :attribute.sync="attribute" @affirm="onAffirm" />
    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onImport" :loading="loading || operationLoading.WagesImport">导入</el-button>
    </template>
  </el-dialog>
</template>
<script>
import importOptionsPop from "./importOptionsPop.vue";
import { importMixins } from "./mixins/import";
export default {
  components: { importOptionsPop },
  name: "importSalaryPop",
  mixins: [importMixins],
  data() {
    return {
      active: "",
      isOptionPop: false
    };
  },
  methods: {
    // 下载模板
    ...{
      onAffirm(e) {
        console.log(e);
        this.columnsPy = e;
        // this.$refs.upload.submit();
        // this.executeDown();
      },
      onClickDown(e) {
        console.log(e, this.active);
        this.executeDown();
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./style/import.less");
</style>
